<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/vue.min.js"></script>
    <title>成语学习</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            margin: auto;
        }

        .title {
            text-align: center;
            padding: 10px 0;
            background-image: linear-gradient(-225deg, #69EACB 0%, #EACCF8 48%, #6654F1 100%);
        }

        .idiom_tips_box {
            text-align: center;
            margin: 30px 0;
        }

        .detailed_description {
            border-radius: 20px;
            padding: 15px 30px;
            border-radius: 4px;
            font-size: 16px;
        }

        .idiom_box {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 20px auto;
        }

        .item_box {
            height: 120px;
            width: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 50px;
            border-radius: 8px;
            margin-right: 10px;
            background: rgb(248, 243, 243);
            border: 1px solid #999
        }

        .optional_words_region {
            margin: auto;
            margin-top: 50px;
            text-align: center;
            display: flex;
            flex-wrap: wrap;
        }

        .words {
            display: block;
            width: 50px;
            height: 50px;
            margin: 5px;
            background: orange;
            border: 1px solid black;
            border-radius: 4px;
            font-size: 40px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .words:hover {
            background: rgb(247, 113, 3);
            color: rgb(248, 243, 243);
        }

        .confirm_btn_box {
            margin: 10px auto;
            display: flex;
            justify-content: center;
            cursor: pointer;
        }

        .confirm_btn {
            margin-top: 30px;
            border-radius: 8px;
            padding: 10px 30px;
            color: white;
            background: #409eff
        }
    </style>
</head>

<body>
<div id="app">
    <div class="title">成语学习</div>
    <!-- 提示-描述 -->
    <div class="idiom_tips_box">
        <span class="detailed_description">提示：{{tip}}</span>
    </div>
    <!-- 选中的成语 -->
    <div class="idiom_box">
        <div class="item_box" v-for="(item,index) in idiom" @click="clear(index)">{{item}}</div>
    </div>
    <!-- 如果 result 的值为 null，则该元素将被设置为灰色（#ccc），显示文本内容为“请点击下方文字组织正确的成语（点击框内文字可清除）”。-->
    <!-- 如果 result 的值为 true，则该元素将被设置为红色，显示文本内容为“答案正确”。-->
    <!-- 如果 result 的值为 false 或者其他任何值，则该元素将保持默认状态，显示文本内容为“答案错误”。-->
    <div :style="result == null ? 'color:#ccc' : result ? 'color : red' : ''" style="text-align:center">
        {{result == null ? '请点击下方文字组织正确的成语（点击框内文字可清除）' : result ? '答案正确' : '答案错误'}}
    </div>
    <!-- 可选区域 -->
    <div class="optional_words_region">
        <span class="words" v-for="(item,index) in this.words" :key="index" @click="getSingleWord(item)">{{item}}</span>
    </div>
    <!-- 确定 -->
    <div class="confirm_btn_box">
        <span class="confirm_btn" @click="confirm">确定</span>
    </div>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            tip: "",
            arr: [
                {word: "热泪盈眶", tip: "形容非常感激或高兴"},
                {word: "才华横溢", tip: "指才华充分显露出来"},
                {word: "聚沙成塔", tip: "比喻积少成多"},
                {word: "名垂青史", tip: "形容功业巨大，永远流传"},
                {word: "绝无仅有", tip: "形容极其稀少"},
                {word: "衣衫褴褛", tip: "形容身上衣服破破烂烂"},
                {word: "焕然一新", tip: "形容呈现出崭新的面貌"},
                {word: "并驾齐驱", tip: "比喻齐头并进，不分前后"},
                {word: "博大精深", tip: "形容思想和学识广博高深"},
                {word: "忙里偷闲", tip: "在繁忙中抽出空闲来"}
            ],
            words: '',
            idiom: ["", "", "", ""],
            result: null
        },
        created() {
            this.tip = this.arr[parseInt(Math.random() * this.arr.length)].tip;
            this.arr.forEach(item => {
                this.words += item.word;
                console.log(this.words);
            });

            let words = this.words.split("");
            console.log(words);
            words = this.shuffle(words);
            console.log(words);
            this.words = words.join("");//join：用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
            console.log(this.words);
        },
        methods: {
            //乱序方法
            shuffle(arr) {
                let temp, length = arr.length;
                for (let i = 0; i < length - 1; i++) {
                    let index = Math.floor(Math.random() * (length--));//floor：对浮点数向下取整
                    temp = arr[index];
                    arr[index] = arr[length];
                    arr[length] = temp;
                }
                return arr;
            },
            //TODO 点击文字后，在idiom从左到右第一个空的位置加上改文字
            /*
            这个函数接收一个参数 val，它的作用是将 val 这个字符串插入到 idiom 这个数组中的空格位置。
            如果 idiom 数组中没有空格（即没有需要填入单个字的位置），则返回空字符串。
            这个函数首先使用 JavaScript 的 indexOf() 方法查找 idiom 数组中第一个出现的空格位置。
            如果找到了空格，则使用 Vue.js 提供的 $set() 方法将 val 插入到这个空格位置中；否则直接返回空字符串。
            在 Vue.js 中直接修改数组或对象可能会导致数据不响应式更新，因此需要使用 $set() 方法进行修改。
            */
            getSingleWord(val) {
                return this.idiom.indexOf('') === -1 ? '' : this.$set(this.idiom, this.idiom.indexOf(''), val);
            },
            clear(i) {
                this.idiom[i] = "";
                this.$set(this.idiom, i, "");
                /*
                this.$set方法用于在Vue实例中添加新属性或更新已有属性。
                this.$set(object, key, value)
                object是需要添加或更新属性的对象，key是需要添加或更新的属性名称，value是需要添加或更新的属性值。
                 */
            },
            // TODO 校验成语是否输入正确答案
            /*
            函数包含了一个箭头函数作为参数，并使用了三元运算符语法。
            具体来说，这个函数的逻辑是先在 arr 数组中查找一个对象，这个对象满足它的 tip 属性等于当前实例的 tip 属性。
            在找到这个对象之后，将它的 word 属性与当前实例中的 idiom 数组拼接成的字符串进行比较。
            如果两者相等，则将当前实例中的 result 属性设置为 true；否则将其设置为 false。这个函数最后会返回这个结果。
            需要注意的是，在箭头函数中使用三元运算符语法可以简化代码逻辑。此外，由于这个函数依赖于实例属性和外部数组变量，因此执行结果可能会随时改变。
             */
            confirm() {
                return this.arr.find(item => item.tip === this.tip).word === this.idiom.join('') ? this.result = true : this.result = false;
                // let word = this.arr.find(item => item.tip == this.tip).word;
                // if (word === this.idiom.join('')) {
                //     this.result = true;
                // } else {
                //     this.result = false;
                // }
            }
        }
    });
</script>
</body>
</html>